<template>
   <div class="">
      <div>
        <swiper loop auto :list="groupimg_list" :index="groupimg_index" @on-index-change="groupimg_onIndexChange"></swiper>
        <!-- line-width 下划线的宽度 -->
        <tab :line-width=2 active-color='#10c5b6' v-model="index">
          <tab-item class="vux-center" :selected="demo2 === item" v-for="(item, index) in list2" @click="demo2 = item" :key="index">{{item}}</tab-item>
        </tab>
        <div v-if="index==0">
          <scroller ref="startActScroller" class="scrollercss"
            :on-refresh="refreshStartAct"
            :on-infinite="infiniteStartAct">
            <div v-for="activity1 in act1list" style="background-color: white;">
              <router-link class='m-bar' :to="{ path: '/activity/ActivityDetail', query: { id: activity1.id }}">
                <div class="vertical-container">
                  <div style="width:30%;float: left;"> 
                    <img :src=(activity1.activityLogo) style="width:90%;height:80px;">
                  </div>
                  <div style="width:60%;float: left;color: #6d6d72;font-size: 12px;">
                    <div style="padding-top:2px">{{ activity1.activityName }}</div>
                    <div style="padding-top:2px">{{ activity1.activityStartTime }}</div>
                    <div style="padding-top:2px">{{ activity1.activityEndTime }}</div>
                    <div style="padding-top:2px">{{ activity1.activityAddr }}</div>
                  </div>
                  <div style="width:10%;float: right;text-align:left;color:#10c5b6;">
                    <div>{{ activity1.starttime }}</div>
                  </div>
                </div>
              </router-link>
            </div>
          </scroller>
        </div>
        <div v-if="index==1">
          <scroller ref="processActScroller" class="scrollercss"
            :on-refresh="refreshProcessAct"
            :on-infinite="infiniteProcessAct">
            <div v-for="activity1 in act2list" style="background-color: white;">
              <router-link class='m-bar' :to="{ path: '/activity/ActivityDetail', query: { id: activity1.id }}">
                <div class="vertical-container">
                  <div style="width:30%;float: left;">
                    <img :src=(activity1.activityLogo) style="width:90%;height:80px;">
                  </div>
                  <div style="width:60%;float: left;color: #6d6d72;font-size: 12px;">
                    <div style="padding-top:2px">{{ activity1.activityName }}</div>
                    <div style="padding-top:2px">{{ activity1.activityStartTime }}</div>
                    <div style="padding-top:2px">{{ activity1.activityEndTime }}</div>
                    <div style="padding-top:2px">{{ activity1.activityAddr }}</div>
                  </div>
                  <div style="width:10%;float: right;text-align:left;color:#10c5b6;">
                    <div>{{ activity1.starttime }}</div>
                  </div>
                </div>
              </router-link>
            </div>
          </scroller>
        </div>
        <div v-if="index==2">
          <scroller ref="endActScroller" class="scrollercss"
            :on-refresh="refreshEndAct"
            :on-infinite="infiniteEndAct">
            <div v-for="activity1 in act3list" style="background-color: white;">
              <router-link class='m-bar' :to="{ path: '/activity/ActivityDetail', query: { id: activity1.id }}">
                <div class="vertical-container">
                  <div style="width:30%;float: left;">
                    <img :src=(activity1.activityLogo) style="width:90%;height:80px;">
                  </div>
                  <div style="width:60%;float: left;color: #6d6d72;font-size: 12px;">
                    <div style="padding-top:2px">{{ activity1.activityName }}</div>
                    <div style="padding-top:2px">{{ activity1.activityStartTime }}</div>
                    <div style="padding-top:2px">{{ activity1.activityEndTime }}</div>
                    <div style="padding-top:2px">{{ activity1.activityAddr }}</div>
                  </div>
                  <div style="width:10%;float: right;text-align:left;color:#10c5b6;">
                    <div>{{ activity1.starttime }}</div>
                  </div>
                </div>
              </router-link>
            </div>
          </scroller>
        </div>
      </div>
   </div>
</template>
<style>
.vertical-container{
        margin: 5px;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
              align-items: center;
        -webkit-justify-content: center;
              justify-content: center;
    }
</style>
<script>

import { Swiper, Tab, TabItem, Group, Card, Cell, XButton } from 'vux'
import { formatDate, getCustomerId } from '../utils/utils'
import { getAuthInfo } from '../utils/common'

const list = () => ['可参加', '进行中', '历史活动']
export default {
  filters: {
    formatDate (time) {
      let date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm')
    }
  },
  components: {
    Swiper,
    Tab,
    TabItem,
    Group,
    Card,
    Cell,
    XButton
  },
  data () {
    return {
      list2: list(),
      demo2: '可参加',
      index: 0,
      act1list: [],
      act2list: [],
      act3list: [],
      act1currentPage: '0',
      act2currentPage: '0',
      act3currentPage: '0',
      act1noData: '',
      act2noData: '',
      act3noData: '',
      groupimg_list: [],
      groupimg_index: 0,
      groupId: '',
      customerid: getCustomerId()
    }
  },
  beforeRouteLeave (to, from, next) {
    console.log('离开页面')
    this.$destroy(true)
    next(true)
  },
  created: function () {
    getAuthInfo('home')
  },
  mounted: function () {
    console.log('请求参数')
    console.log(this.$router.currentRoute.query.id)
    this.groupId = this.$router.currentRoute.query.id
    this.top = [1, 1, 1]
    this.bottom = [10, 10, 10]
    var that = this
    let config = {
      headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json'},
      data: {
        'customerId': that.customerid,
        'groupId': that.groupId
      },
      method: 'post'
    }
    this.$ajax('api/cms/activity/queryHotActivity', config).then(function (response) {
      console.log('加载推荐活动')
      var actdata = response.data.data.activities
      console.log(actdata)
      for (var i = 0; i < actdata.length; i++) {
        var activity = {url: '/activity/activityDetail?id=123 ', img: actdata[i].activityLogo, title: actdata[i].activityName}
        that.groupimg_list.push(activity)
      }
    }).catch(function (error) {
      console.log(error)
    })
    let act1config = {
      headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
      data: {
        'actStatus': '1',
        'customerId': that.customerid,
        'groupId': that.groupId,
        'currentPage': '0',
        'pageSize': '10'
      },
      responseType: 'json',
      method: 'post'
    }
    this.$ajax('api/cms/activity/groupActlist', act1config).then(function (response) {
      console.log(response)
      console.log(response.data.data.activities.length)
      console.log(response.data.pagination.currentPage)
      that.act1currentPage = response.data.pagination.currentPage + 1
      var actlist = response.data.data.activities
      that.act1list = actlist
    }).catch(function (error) {
      console.log(error)
    })
    let act2config = {
      headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
      data: {
        'actStatus': '2',
        'customerId': that.customerid,
        'groupId': that.groupId,
        'currentPage': '0',
        'pageSize': '10'
      },
      responseType: 'json',
      method: 'post'
    }
    this.$ajax('api/cms/activity/groupActlist', act2config).then(function (response) {
      console.log(response)
      console.log(response.data.data.activities.length)
      console.log(response.data.pagination.currentPage)
      that.act2currentPage = response.data.pagination.currentPage + 1
      var actlist = response.data.data.activities
      that.act2list = actlist
    }).catch(function (error) {
      console.log(error)
    })
    let act3config = {
      headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
      data: {
        'actStatus': '3',
        'customerId': that.customerid,
        'groupId': that.groupId,
        'currentPage': '0',
        'pageSize': '10'
      },
      responseType: 'json',
      method: 'post'
    }
    this.$ajax('api/cms/activity/groupActlist', act3config).then(function (response) {
      console.log(response)
      console.log(response.data.data.activities.length)
      console.log(response.data.pagination.currentPage)
      that.act3currentPage = response.data.pagination.currentPage + 1
      var actlist = response.data.data.activities
      that.act3list = actlist
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods: {
    refreshStartAct: function (done) {
      console.log('下拉刷新可参加活动')
      console.log('refreshStartAct')
      var self = this
      this.act1noData = true
      setTimeout(() => {
        self.act1list = []
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'customerId': self.customerid,
            'actStatus': '1',
            'groupId': self.groupId,
            'currentPage': '0',
            'pageSize': '10'
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/activity/groupActlist', config).then(function (response) {
          console.log(response)
          console.log(response.data.data.activities.length)
          console.log(response.data.pagination.currentPage)
          self.act1currentPage = response.data.pagination.currentPage + 1
          var actlist = response.data.data.activities
          self.act1list = actlist
        }).catch(function (error) {
          console.log(error)
        })
        done()
      }, 500)
    },
    infiniteStartAct: function (done) {
      console.log('上拉加载可参加活动')
      console.log('infiniteStartAct')
      var self = this
      if (this.act1noData) {
        console.log(this.act1noData)
        this.act1noData = false
        self.$refs.startActScroller.finishInfinite(true)
        return
      }
      setTimeout(() => {
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'customerId': self.customerid,
            'actStatus': '1',
            'groupId': self.groupId,
            'currentPage': self.act1currentPage,
            'pageSize': '10'
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/activity/groupActlist', config).then(function (response) {
          console.log(response)
          console.log(response.data.code)
          var code = response.data.code
          self.act1currentPage = response.data.pagination.currentPage + 1
          if (code === '01') {
            self.act1noData = '没有更多数据'
            self.$refs.startActScroller.finishInfinite(true)
            return
          }
          var actlist = response.data.data.activities
          console.log(actlist)
          var start = actlist.length
          console.log(start)
          for (var i = 0; i < start; i++) {
            console.log(actlist[i])
            self.act1list.push(actlist[i])
          }
          self.bottom[0] = self.bottom[0] + 10
          done()
        }).catch(function (error) {
          console.log(error)
        })
      }, 500)
    },
    refreshProcessAct: function (done) {
      console.log('下拉刷新进行中活动')
      console.log('refreshProcessAct')
      var self = this
      this.act2noData = true
      setTimeout(() => {
        self.act2list = []
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'customerId': self.customerid,
            'actStatus': '2',
            'groupId': self.groupId,
            'currentPage': '0',
            'pageSize': '10'
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/activity/groupActlist', config).then(function (response) {
          console.log(response)
          console.log(response.data.data.activities.length)
          console.log(response.data.pagination.currentPage)
          self.act2currentPage = response.data.pagination.currentPage + 1
          var actlist = response.data.data.activities
          self.act2list = actlist
        }).catch(function (error) {
          console.log(error)
        })
        done()
      }, 500)
    },
    infiniteProcessAct: function (done) {
      console.log('上拉加载进行中活动')
      console.log('infiniteProcessAct')
      var self = this
      if (this.act2noData) {
        console.log(this.act2noData)
        this.act2noData = false
        self.$refs.processActScroller.finishInfinite(true)
        return
      }
      setTimeout(() => {
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'customerId': self.customerid,
            'actStatus': '2',
            'groupId': self.groupId,
            'currentPage': self.act2currentPage,
            'pageSize': '10'
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/activity/groupActlist', config).then(function (response) {
          console.log(response)
          console.log(response.data.code)
          var code = response.data.code
          self.act2currentPage = response.data.pagination.currentPage + 1
          if (code === '01') {
            self.act2noData = '没有更多数据'
            self.$refs.processActScroller.finishInfinite(true)
            return
          }
          var actlist = response.data.data.activities
          console.log(actlist)
          var start = actlist.length
          console.log(start)
          for (var i = 0; i < start; i++) {
            console.log(actlist[i])
            self.act2list.push(actlist[i])
          }
          self.bottom[1] = self.bottom[1] + 10
          done()
        }).catch(function (error) {
          console.log(error)
        })
      }, 500)
    },
    refreshEndAct: function (done) {
      console.log('下拉刷新已结束活动')
      console.log('refreshEndAct')
      var self = this
      this.act3noData = true
      setTimeout(() => {
        self.act3list = []
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'customerId': self.customerid,
            'actStatus': '3',
            'groupId': self.groupId,
            'currentPage': '0',
            'pageSize': '10'
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/activity/groupActlist', config).then(function (response) {
          console.log(response)
          console.log(response.data.data.activities.length)
          console.log(response.data.pagination.currentPage)
          self.act3currentPage = response.data.pagination.currentPage + 1
          var actlist = response.data.data.activities
          self.act3list = actlist
        }).catch(function (error) {
          console.log(error)
        })
        done()
      }, 500)
    },
    infiniteEndAct: function (done) {
      console.log('上拉加载已结束活动')
      console.log('infiniteEndAct')
      var self = this
      if (this.act3noData) {
        console.log(this.act3noData)
        this.act3noData = false
        self.$refs.endActScroller.finishInfinite(true)
        return
      }
      setTimeout(() => {
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'customerId': self.customerid,
            'actStatus': '3',
            'groupId': self.groupId,
            'currentPage': self.act3currentPage,
            'pageSize': '10'
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/activity/groupActlist', config).then(function (response) {
          console.log(response)
          console.log(response.data.code)
          var code = response.data.code
          self.act3currentPage = response.data.pagination.currentPage + 1
          if (code === '01') {
            self.act3noData = '没有更多数据'
            self.$refs.endActScroller.finishInfinite(true)
            return
          }
          var actlist = response.data.data.activities
          console.log(actlist)
          var start = actlist.length
          console.log(start)
          for (var i = 0; i < start; i++) {
            console.log(actlist[i])
            self.act3list.push(actlist[i])
          }
          self.bottom[2] = self.bottom[2] + 10
          done()
        }).catch(function (error) {
          console.log(error)
        })
      }, 500)
    },
    groupimg_onIndexChange (index) {
      this.groupimg_index = index
    }
  }
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';

.scrollercss {
  position: relative;
}

.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}

.participate-img li{
  width:20px;
  height:20px;
  float:left;
  display:inline;
  margin-left:5px;
}

.participate-img li img{
  width:20px;
  height:20px;
  border-radius: 50%;
}
</style>
